<template>
  <base-breadcrumb>
    <searchData
      ref="searchData"
      :search-data="searchArr"
      @search="search"
    />
    <a-card :bordered="false">
      <list-table
        ref="table"
        :loading="loading"
        :request="loadData2"
        :columns="columns"
        row-key="id"
      >
        <template
          slot="index"
          slot-scope="text, record, index"
        >
          {{ index + 1 }}
        </template>

        <template
          slot="MaintenanceConsult"
          slot-scope="text, record, index"
        >
          <a
            class="base-btn"
            @click="getInfoShow(record)"
          >{{ record.maintenanceConsult }}   </a>
        </template>
        <div
          slot="operation"
          slot-scope="text, record, index"
        >
          <MoreButton>
            <a
              v-btnPermission="'crm_002_loo_01'"
              @click="handleEdit(record, 3,true)"
            >查看</a>
            <a
              v-if="record.status == 1"
              v-btnPermission="'crm_002_edi_02'"
              @click="() => handleEdit(record, 2,true)"
            >编辑</a>
            <a
              v-if="record.status != 4 && record.status != 5 && record.status != 9"
              v-btnPermission="'crm_002_rev_03'"
              @click="() => handleDel(record.id)"
            >撤销</a>
            <approval-button
              v-if="record.status != 0 && record.status != 1"
              :id="record.id"
              v-btnPermission="'crm_002_app_04'"
            />
          </MoreButton>
        </div>
      </list-table>
    </a-card>
    <a-modal
      title="维保借鉴"
      :visible="infoShow"
      style="width: 50%;"
      cancel-text="关闭"
      @cancel="cancelInfoShow"
    >
      <s-table
        v-if="infoShow"
        ref="infotable"
        size="default"
        row-key="id"
        :columns="infoColumns"
        :data="loadData"
        :alert="true"
        show-size-changer
        show-quick-jumper
        show-pagination="auto"
        :scroll="{ y: 600 }"
      >
        <template
          slot="operator"
          slot-scope="text, record"
        >
          <a
            class="base-btn"
            @click="handleEdit(record, 3,false)"
          >详情</a>
        </template>
      </s-table>
      <template slot="footer">
        <a-button @click="cancelInfoShow">
          关闭
        </a-button>
      </template>
    </a-modal>
  </base-breadcrumb>
</template>
<script>

import {getMaintenanceInfo, cancelManager,getComplaintList, getPCProjectList, customerComplaintCancel } from '@/api/complaint/maintenance'
import Selector from '@/components/Select/Selector'
import { STable } from '@/components'
import SelectSubCompany from '@/components/Select/SelectSubCompany'
import SelectProject from '@/components/Select/SelectProject' // 项目
import SelectCompanyAndProject from '@/components/Select/SelectCompanyAndProject' // 组织
import OrgTreeSelect from '@/components/OrgTreeSelect'
export default {
  name: 'asfdsf' + Date.now(),
  components: {
    STable,
  },
  data: function () {
    return {
      pathName: this.$route.path,
      loading: false,
      infoShow: false,
      queryParam: {},
      infoQueryParam: {},
      pageNo: 1,
      pageSize: 10,
      totalSize: 0,
      infoColumns: [
        {
          title: '项目名称',
          dataIndex: 'projectName',
        },
        {
          title: '维保单编号',
          dataIndex: 'code',
        },
         {
          title: '维保事项',
          dataIndex: 'infoName',
        },
         {
          title: '维保发起人',
          dataIndex: 'createUser',
        },
         {
          title: '维保发起时间',
          dataIndex: 'createTime',
        },
        {
          title: '状态',
          dataIndex: 'statusName',
        }, {
          title: '操作',
          dataIndex: 'operator',
          width: 200,
          fixed: 'right',
          scopedSlots: { customRender: 'operator' }
        }
      ],
      searchArr: [
          {
            name: '所属单位',
            valueKey: 'searchQuery',
            type: OrgTreeSelect,
          },
        // {
        //   name: '所属组织',
        //   valueKey: 'statisticsId',
        //   type: SelectCompanyAndProject
        // },
        // {
        //   name: '所属分公司',
        //   valueKey: 'branchComId',
        //   type: SelectSubCompany
        // },
        // {
        //     name: '项目名称',
        //     type: SelectProject,
        //     keyValue: 'branchComId',
        //     valueKey: 'projectId'
        // },
        {
          name: '维保单编号',
          value: 'code',
          type: 'input'
        },
        {
          name: '业态',
          value: 'formats',
          type: 'input'
        },
        // {
        //   name: '竣工日期',
        //   value: 'completionTime',
        //   type: 'dateRange',
        //   attr: {
        //     rangeFormat: ['completeStartTime', 'completeEndTime']
        //   }
        // },
        {
          name: '维保事项',
          value: 'infoId',
          type: 'select',
          data: [
          ]
        },

        {
          name: '维保发起时间',
          value: 'createTime',
          type: 'dateRange',
          attr: {
            rangeFormat: ['startTime', 'endTime']
          }
        },
        {
          name: '状态',
          value: 'statusList',
          type: 'selectMode',
          data: [
            {
              value: '0',
              label: '维保方案未完成'
            },
            {
              value: '1',
              label: '维保进行中'
            },
            {
              value: '2',
              label: '审核中'
            },
            {
              value: '3',
              label: '待业主反馈'
            },
            {
              value: '4',
              label: '已闭合(未评价)'
            },
            {
              value: '5',
              label: '已闭合(已评价)'
            },
            {
              value: '9',
              label: '已撤销'
            }
          ]
        },
        {
          name: '维保发起人',
          value: 'createUser',
          type: 'input',
        },
        {
          name: '处理次数',
          value: 'many',
          type: 'select',
          data: [
            {
              value: '0',
              label: '多次'
            },
            {
              value: '1',
              label: '一次'
            }
          ]
        }
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          scopedSlots: { customRender: 'index' },
          width: 70
        }, {
          title: '项目名称',
          dataIndex: 'projectName',
          width: 220
        },
        {
          title: '所属分公司',
          dataIndex: 'branchComName',
          width: 160
        },
        {
          title: '维保单编号',
          dataIndex: 'code',
          width: 160
        },
        {
          title: '业态',
          dataIndex: 'formats',
          width: 160
        },
        {
          title: '竣工日期',
          dataIndex: 'completionTime',
          width: 160
        },
        {
          title: '维保年限',
          dataIndex: 'maintenancePeriodYear',
          width: 160,
        },
        {
          title: '合同维保截止时间',
          dataIndex: 'maintenancePeriodCloseTime',
          width: 160
        },
        {
          title: '质保金总额(万元)',
          dataIndex: 'amount',
          width: 160,
        },
        {
          title: '维保发生周期',
          dataIndex: 'maintenanceCycle',
          width: 160
        },
        {
          title: '维保事项',
          dataIndex: 'infoName',
          width: 160
        },
        {
          title: '维保发起时间',
          dataIndex: 'createTime',
          width: 160
        },
        {
          title: '维保事项花费',
          dataIndex: 'cost',
          width: 160
        },
           {
          title: '处理次数',
          dataIndex: 'handleTimes',
          width: 160
        },
        {
          title: '维保借鉴',
          dataIndex: 'MaintenanceConsult',
          scopedSlots: { customRender: 'MaintenanceConsult' },
          width: 160
        },

          {
          title: '维保发起人',
          dataIndex: 'createUser',
          width: 160
        },
        {
          title: '状态',
          width: 160,
          dataIndex: 'statusName',
        },

        {
          title: '操作',
          dataIndex: 'operation',
          width: 200,
          fixed: 'right',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      selectedRowKeys: [],
      selectId: [],
      selectedRows: [],
      chooseData: 0,
      tableData: [],
      projectData: [],
      loadData2: (parameter) => {
          let that = this
          parameter.pageNum = parameter.pageNo;
          delete parameter.pageNo;
          this.loading = true;
          const requestParameters = Object.assign({}, parameter, { param: that.queryParam })
          return getComplaintList(requestParameters).then((res) => {
             let list = res.data?.list;
             this.loading = false;
             return { code: 200, data: list, totalSize: res.data?.total }
          })
        },
    }
  },
  watch:{
  $route(to,from){
    console.log()
    if(to.params){
      this.$nextTick(()=>{
        from.path === '/complaint/statistics' && this.$refs.searchData?.form?.resetFields()
        this.$refs.searchData.form.setFieldsValue(to.params)
        this.$refs.searchData?.search()
      })
    }
  },
},
  created () {
    if(!this.$route.params || (this.$route.params instanceof Object && !Object.keys(this.$route.params)?.length)) {
     this.$refs.table.refresh()
    }
    this.initCode()
  },
  mounted: function () {
    if (this.$route.params) {
      const data = this.$route.params
      // this.$refs.searchData?.form?.resetFields()
      this.$refs.searchData.form.setFieldsValue(data)
      this.$refs.searchData?.search()
    }
    let maintenance  = sessionStorage.getItem('maintenance')?? null;
    maintenance && this.getInfoShow(JSON.parse(maintenance))
    this.$bus.$on('handleRefresh' + this.pathName, () => {
       this.$refs.table.refresh()
    })

  },
  beforeDestroy () {
    console.log(this.$store.state.tabInfo)
    this.$bus.$off('handleRefresh' + this.pathName)
  },
  methods: {
    cancelInfoShow(){
      this.infoShow = false;
      sessionStorage.removeItem('maintenance');
    },
    initCode(){
      getMaintenanceInfo().then(res=>{
        const data = []
        res.data.map(node=>{
          data.push({
            label:node.name,
            value:node.code,
          })
        })
        this.searchArr[3].data =data
      })
    },
    loadData (parameter) {
      const searchData = {
        pageSize: parameter.pageSize,
        pageNum: parameter.pageNo,
        param: this.infoQueryParam
      }
      return getComplaintList(searchData).then(res => {
        return { code: 200, data: res.data?.list, total: res.data?.total }
      })
    },
    getInfoShow (record) {
      if (record.maintenanceConsult <= 0) {
        return false
      } else {
        this.infoQueryParam = {
          infoId:record.infoId,
          statusList:[3,4,5]
        }
        this.infoShow = true
      }
      sessionStorage.setItem("maintenance", JSON.stringify(record));
    },
    getCode () {
      getPCProjectList().then(res => {
        let projectData = []
        res.data.map(node => {
          projectData.push({
            value: node.id,
            label: node.name
          })
        })
        this.searchArr[1].data = projectData
      })
    },
    search (val) {
      this.queryParam = { ...val }
      this.$refs.table.refresh()
    },
    handleDel (id) {
      let that = this
      that.$confirm({
        title: '温馨提示',
        content: '确定是否撤销？',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          return cancelManager({ id: id })
            .then((res) => {
              that.$message.success('撤销成功！')
              that.$refs.table.refresh(true)
            }).catch(err => {
              console.log(err)
            })
        }
      })
    },

    handleEdit (record, state,flag) {
      if(flag){
        sessionStorage.removeItem('maintenance');
      }
      this.infoShow = false
      this.$router.push({
        name: 'AddStanding',
        query: {
          id: record && record.id || '',
          state: state
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-modal {
  width: 900px !important;
}
</style>
